<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的学生</title>
		<!--引入layui的css  -->
		<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
		<script src="../lib/layui-v2.6.3/layui.js"></script>
		<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css">
		<script src="../js/global.js"></script>
	</head>
	<style type="text/css">
			@media screen and (min-width: 320px) and (max-width: 1156px){
				.talk_con_mob{
					width:600px;
					height:500px;
					border:1px solid #666;
					margin:50px auto 0;
					background:#f9f9f9;
				}
				.talk_show_mob{
					width:580px;
					height:420px;
					border:1px solid #666;
					background:#fff;
					margin:10px auto 0;
					overflow:auto;
				}
				.talk_input_mob{
					width:580px;
					margin:10px auto 0;
				}
				.talk_word_mob{
					width:420px;
					height:26px;
					padding:0px;
					float:left;
					margin-left:10px;
					outline:none;
					text-indent:10px;
				}
			}
			.talk_con{
				width:600px;
				height:500px;
				border:1px solid #666;
				margin:50px auto 0;
				background:#f9f9f9;
			}
			.talk_show{
				width:580px;
				height:420px;
				border:1px solid #666;
				background:#fff;
				margin:10px auto 0;
				overflow:auto;
			}
			.talk_input{
				width:580px;
				margin:10px auto 0;
			}
			.whotalk{
				width:80px;
				height:30px;
				float:left;
				outline:none;
			}
			.talk_word{
				width:382px;
				height:26px;
				padding:0px;
				float:left;
				margin-left:10px;
				outline:none;
				text-indent:10px;
			}
			.talk_sub{
				width:80px;
				height:30px;
				/*float:right;*/
				margin-right:10px;
			}
			.atalk{
				margin:10px;
			}
			.atalk span{
				display:inline-block;
				background:#0181cc;
				border-radius:10px;
				color:#fff;
				padding:5px 10px;
			}
			.btalk{
				margin:10px;
				text-align:right;
			}
			.btalk span{
				display:inline-block;
				background:#ef8201;
				border-radius:10px;
				color:#fff;
				padding:5px 10px;
			}
			</style>

	<body>
	<!-- 查询条件输入框 -->
	<div class="layui-form-item" style="margin-top: 10px;">
		<form class="layui-form"  onsubmit="return false;" id="queryForm">
			<label class="layui-form-mid">姓名:</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="name" name="name" autocomplete="off" class="layui-input">
			</div>
			
			<label class="layui-form-mid">创建时间:</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="begintime" name="begintime" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
			</div>
			<label class="layui-form-mid">--</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="endtime" name="endtime" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
			</div>
			
			<label class="layui-form-mid">状态:</label>
			<div class="layui-input-inline" style="width: 200px;">
				<select name="stuStatus">
					<option value="">请选择</option>
					<option value="1">已录入</option>
					<option value="2">已分配咨询师</option>
					<option value="3">正在跟踪</option>
					<option value="4">跟踪结束（已缴费）</option>
					<option value="5">跟踪结束(失败)</option>
				</select>
			</div>
			
			<div class="layui-input-inline" style="width: 300px;">
				<button class="layui-btn" lay-submit="" lay-filter="search" id="search" data-type="reload"><i class="layui-icon">&#xe615;</i>搜索</button>
				<button class="layui-btn layui-btn-normal" type="reset" ><i class="layui-icon">&#xe666;</i>重置</button>
			</div>
		</form>
	</div>
	

	<!-- 修改的弹层页面  -->
	<div id="editLayer" style="display: none; margin-top: 20px;">
		<form class="layui-form" lay-filter="editForm" id="editForm"
			action="">
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red">*</span>产品名称:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="pName" class="layui-input" 
							autocomplete="off" lay-verify="required">
					<input type="hidden"  name="id" > <!--隐藏域，用来保存id的值-->		
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red">*</span>正常售价:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="sellPrice"
						class="layui-input" autocomplete="off" lay-verify="required|number">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red">*</span>开售时间:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="onSaleTime" placeholder="yyyy-MM-dd HH:mm:ss" 
						class="layui-input" autocomplete="off" lay-verify="required|datetime">
				</div>
			</div>
			<div class="layui-btn-container" style="text-align: center;">
				<button class="layui-btn" lay-filter="editSubmit" lay-submit="">修改提交</button>
			</div>
		</form>
	</div>


	<!-- 新增的弹层页面  -->
	<div id="addLayer" style="display: none; margin-top: 20px;">
		<form class="layui-form" lay-filter="addForm" id="addForm"
			action="">
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red">*</span>姓名:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="name" class="layui-input"
						   autocomplete="off" lay-verify="required">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red">*</span>性别:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="radio" name="sex" value="男" title="男"checked>
					<input type="radio" name="sex" value="女" title="女">
				</div>
			</div>
			<input type="hidden" name="netpusherId" id="netpusherId"><!--添加人的id-->
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red">*</span>年龄:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="age" class="layui-input"
						   autocomplete="off" lay-verify="required|number">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red">*</span>手机号:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="phone" class="layui-input"
						   autocomplete="off" lay-verify="required|phone">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">QQ:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="QQ" class="layui-input"
						   autocomplete="off">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">微信:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="weixin" class="layui-input"
						   autocomplete="off">
				</div>
			</div>

			<div class="layui-btn-container" style="text-align:center;">
				<button class="layui-btn" lay-filter="addSubmit" lay-submit="">提交</button>
			</div>
		</form>
	</div>


	<!-- 查看的弹层页面  -->
	<div id="detailLayer" style="display: none; margin-top: 20px;">
		<form class="layui-form" lay-filter="detailForm" id="detailForm"
			action="">
			<div class="layui-inline">
				<div class="layui-form-item">
					<label class="layui-form-label">产品名称:</label>
					<div class="layui-input-inline" style="width: 300px;">
						<input type="text"  name="pName" class="layui-input" disabled="disabled">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">生产厂家:</label>
					<div class="layui-input-inline" style="width: 300px;">
						<input type="text"  name="factory" class="layui-input" disabled="disabled">
					</div>
				</div>
			</div>
		</form>
	</div>
	
	<!-- 批量分配弹层页面 -->
	<div id="batchFenLayer" style="display: none; margin-top: 20px;">
		<form class="layui-form" lay-filter="batchFenForm" id="batchFenForm"
			action="">
			<div class="layui-inline">
				
				 <div class="layui-form-item">
					<label class="layui-form-label">勾选的学生:</label>
					<div class="layui-input-inline" style="width: 300px;" >
						<span  id="checkedStudent" style="color: #0000FF;"></span>
						<input type="text" hidden="hidden" name="studentIds" id="studentIds" />
					</div>
				</div> 
				<!-- <div class="layui-form-item">
					<label class="layui-form-label">勾选的学生:</label>
					<div class="layui-input-inline" style="width: 300px;">
						<input type="text" id="checkedStudent" name="checkedStudent" class="layui-input" style="color: #0000FF;">
					</div>
				</div> -->
				<div class="layui-form-item">
					<label class="layui-form-label">咨询师:</label>
					<div class="layui-input-inline" style="width: 300px;">
						<select name="askerId" id="askerSelect">
							<option value="">--请选择--</option>
						</select>
					</div>
					
				</div>
				<div class="layui-btn-container" style="text-align: center;">
					<button class="layui-btn" lay-filter="batchFenSubmit" lay-submit="">提交</button>
				</div>
			</div>
		</form>
	</div>


<!-- 发信息的弹层DIV  -->
		<div id="sendDIV" style="display: none; margin-top: 20px;">
			<form class="layui-form" lay-filter="sendForm" id="sendForm" action="">
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red">*</span>内容</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" name="content" class="layui-input" autocomplete="off" lay-verify="required">
						<input type="hidden" name="id" id="id" />
						<input type="hidden" name="senderId" id="senderId" />
						<input type="hidden" name="senderName" id="senderName" />
						
					</div>
				</div>
				<div class="layui-btn-container" style="text-align:center;">
					<button class="layui-btn" lay-filter="sendSubmitBtn" lay-submit="">提交</button>
				</div>
			</form>
		</div>
		
		<!-- 在线聊天  -->
		<div id="messageLayer" style="display: none; margin-top: 20px;" > 
			<form class="layui-form" lay-filter="messageForm" id="messageForm" action="">
				<div style="text-align: center;">
					<span>
					<span>
					<span><input id="toUserId" name="toUserId" type="hidden"></span>
					</span>
						【我的姓名】：
					<span><input id="createUser" name="createUser" type="text" readonly="readonly"></span>
					<span>【接收人姓名】：
					<span><input id="ziXunName" name="ziXunName" type="text" readonly="readonly"></span>
					</span>
					</span>
				</div>
				<div class="talk_con" id="talk_con_id">
					<div class="talk_show" id="liaotianshi">
					</div>
					<div class="talk_input">
						<input id="contentText" class="talk_word" name="contentText" type="text">
						<input type="button" value="发送" class="talk_sub" onclick="sendMessage()">
						<input type="button" value="关闭聊天" class="talk_sub" onclick="closeSocket()">
					</div>
				</div>
			</form>
		</div>



		<!--定义数据表格table  -->
		<table class="layui-hide" id="proTable" lay-filter="filterTable"></table>
		
		<!--表格数据里的编辑、查看等操作按钮  -->
		<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs layui-btn-primary ops" ops="students:message"  lay-event="message" onclick="openSocket()"><i class="layui-icon">&#xe642;</i>在线聊天</a>
		{{# if (d.stuStatus != 1){}}
		    <a class="layui-btn layui-btn-xs layui-btn-primary ops" ops="students:send" lay-event="send"><i class="layui-icon">&#xe642;</i>发消息</a>
		{{# } }}
			<!-- <a class="layui-btn layui-btn-xs layui-btn-primary ops" ops="students:send"  lay-event="send"><i class="layui-icon">&#xe642;</i>发消息</a> -->
			<a class="layui-btn layui-btn-xs layui-btn-danger ops" ops="students:del"  lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
			
	</script>
		
		<!--表格工具栏的新增、批量等按钮  -->
		<script type="text/html" id="toolbarDemo">
  		<div class="layui-btn-container">
    		<button class="layui-btn layui-btn-sm layui-btn-normal ops" ops="students:add" lay-event="add"><i class="layui-icon">&#xe654;</i>添加</button>
			<button class="layui-btn layui-btn-sm layui-btn-normal ops" ops="students:export"  lay-event="export"><i class="layui-icon">&#xe654;</i>导出</button>
			<button class="layui-btn layui-btn-sm layui-btn-normal ops"  ops="students:import" id="importExcel" lay-event="import"><i class="layui-icon">&#xe654;</i>导入</button>
			<button class="layui-btn layui-btn-sm layui-btn-normal ops"  ops="students:template" lay-event="downloadTemplate"><i class="layui-icon">&#xe654;</i>下载模板</button>
			<button class="layui-btn layui-btn-sm layui-btn-normal ops" ops="students:allot" lay-event="allot"><i class="layui-icon">&#xe654;</i>批量分配</button>
  		</div>
		</script>

		<script>
		
			//全局变量
			var cur_roleId; //正在编辑的角色id			
			var treeSelectedArr = []; //声明数组，用于保存选中的tree节点的Id
		
			layui.use(['laydate','layer','form','table','tree','upload','transfer'], function() {
				var laydate = layui.laydate	//日期组件
					,layer = layui.layer	//弹层组件
					,form = layui.form		//表单组件
					,upload = layui.upload  //上传组件
					,tree = layui.tree		//树形结构组件
					,$= layui.jquery    	//jQuery
					,table = layui.table	//表格组件
					,transfer = layui.transfer; //穿梭框组件
					//日期控件
					laydate.render({
						elem: '#begintime'
					});
					laydate.render({
						elem: '#endtime'
					});
					closeBtn :0,
					
					//获取所有咨询师，填充下拉选框的数据
								$(function() {
									$.ajax({
										type: 'get',				
										url: globalData.server+ 'students/findAllAskers',		
										headers:{token:globalData.token},
										dataType: 'json',
										success: function(data) {
											$.each(data, function(index, item) {
												//填充下拉列表
												$('#askerSelect').append(new Option(item.askerName, item.askerId)); 
											});
											layui.form.render("select");
										},
										error: function() {
											alert("获取失败！！！")
										}
									});
								})
					

					
				//渲染表格，填充数据
			 	table.render({
					elem: '#proTable',			//对应上面定义的表格ID								
					url: globalData.server+'students/findByStudents?userId='+globalData.userId,//提交到后台的地址
					headers:{token:globalData.token},
					method: 'get',				//提交方式 get或者post
					even: true, 				//表格隔行变色
					page: true,					//开启分页
					toolbar: '#toolbarDemo', 	//开启头部工具栏，并为其绑定左侧模板
					title: '学生表', 				//表格名称
					cols: [
						[{
							field: 'ck',
							fixed: 'left',
							type: 'checkbox',
							width: 100
						},{
							field: 'id',	//对应实体类里的属性    （必需有）
							fixed: 'left',	//固定方式，left左固定，right右固定 （可选）
							align:'center', //排列方式：left左对齐，center居中，right右对齐（可选）
							width: 80,		//单元格宽度（可选）	
							title: '编号',	//表头名称			（必需有）
							sort: true		//开启排序（可选）
						}, {
							field: 'name',	//对应实体类里的属性
							width: 80,		//单元格宽度
							title: '姓名'		//表头名称
						},{
							field: 'age',	//对应实体类里的属性
							width: 80,		//单元格宽度
							title: '年龄'		//表头名称
						},{
							field: 'sex',	//对应实体类里的属性
							width: 80,		//单元格宽度
							title: '性别'		//表头名称
						}, {
							field: 'phone',
							width: 120,
							title: '电话',
						}, {
							field: 'qq',
							width: 120,
							title: 'QQ'
						},{
							field: 'weixin',
							title: '微信',
							width: 120,
						},{
							field: 'stuStatus',
							title: '状态',
							width: 150,
							// fixed: 'right',
							templet: function (d) {
								if (d.stuStatus == 1) {
									return '<div style="color:#5FB878;" >已录入未分配</div>';
								}else if(d.stuStatus == 2){
									return '<div style="color:#FF5722;" >已分配咨询师</div>';
								}else if(d.stuStatus == 3){
									return '<div style="color:#FFB800;" >正在跟踪</div>';
								}else if(d.stuStatus == 4){
									return '<div style="color:#FFB800;" >跟踪结束（已缴费）</div>';
								}else{
									return '<div style="color:#FFB800;" >跟踪结束（失败）</div>';
								}
							}
						},{
							field: 'createUser',
							title: '网络咨询or咨询经理',
							width: 130,
					  	},{
							field: 'ziXunName',
							title: '咨询师',
							width: 130,
						},{
							field: 'createTime',
							title: '创建时间',
							width: 170,
						},{
							field: 'firstVisitTime',
							title: '第一次跟踪时间',
							width: 170,
						},{
							field: 'isPay',
							title: '是否付款',
							width: 170,
							templet: function (d) {
								if (d.isPay == 0) {
									return '<div style="color:#5FB878;" >未付款</div>';
								}else{
									return '<div style="color:#FFB800;" >已付款</div>';
								}
							}
						},{
							field: 'payTime',
							title: '付款时间',
							width: 170,
						},{
							field: 'money',
							title: '付款金额',
							width: 130,
						},{
							fixed: 'right',
							width: 300,
							title: '操作',
							toolbar: '#barDemo'
						}]
					],
					done: function(res, curr, count){
						var myOps = sessionStorage.getItem("buttonPermission");
						$(".ops").each(function(){
							if(myOps.indexOf($(this).attr('ops'))==-1){
								$(this).hide();
							}
						});
					}
				});
					
				/*
					条件查询	submit 对应 lay-submit  search 对应 lay-filter
				*/
			    form.on('submit(search)', function (data) {
	                var field = data.field;		//获取所有的输入条件值
	                //执行重载
	                table.reload('proTable', {
	                    page: { curr: 1 }, 		// 重载后回到第一页
	                    where: field			// 把所有的输入值传给后台
	                });
	            }); 
				
				//表格头部工具栏事件
				table.on('toolbar(filterTable)', function(obj){
				    switch(obj.event){
				    	//新增按钮
				      case 'add':
				    		//清空新增页面的表单内容，防止上次输入的数据还在
							$("#addForm")[0].reset();
						  // var str = globalData.userId;
						  // $("#askerId").val(str);
						  document.getElementById("netpusherId").value=globalData.userId;
						 	//打开新增的弹层
							layer.open({
								type:1, 
								title: '您正在新增学生信息',
								content: $('#addLayer'),
								area: ['40%','80%']
							});
				      break;
				      	//批量删除按钮
				      case 'delAll':
				    		//获取选中的数据
			                var checkStatus = table.checkStatus('proTable');
			                var ids = [];
			                for(var i=0; i<checkStatus.data.length; i++){
			                	ids.push(checkStatus.data[i].id)
			                }
			                if(ids.length == 0){
			                	alert("请选择需要删除的产品");
			                	return;
			                }
			                //拼接id(把数组转成字符串，并且用逗号拼接),比如ids=[2,5,6]，那么id='2,5,6'
			                var id = ids.join(',');
			                if(confirm("确定全部删除吗？")){
			                	$.ajax({
									type: 'post', 		//提交方式get或post
									url: '', 			//提交路径
									data: {'ids':id}, 	//参数
									dataType: 'json', 	//返回的数据类型
									success: function(res) { 		//提交成功
										layer.alert(res.msg);
										table.reload('proTable'); 
									},
									error: function() { 			//提交失败
										alert("系统异常！！")
									}
								}); 
			                }
				    	  
				      	break;
						case 'export'://导出excel
							//获取选中的数据
							var checkStatus = table.checkStatus('proTable');
							var ids = [];
							for(var i=0; i<checkStatus.data.length; i++){
								ids.push(checkStatus.data[i].id)
							}

							//拼接id(把数组转成字符串，并且用逗号拼接),比如ids=[2,5,6]，那么id='2,5,6'
							var idStr = ids.join(',');
							window.location.href = globalData.server+"students/exportExcel?"+$("#queryForm").serialize()+"&token="+globalData.token+"&userId="+globalData.userId+"&idStr="+idStr;
							break;
						case 'import'://导入excel在外面
							break;
						case 'downloadTemplate'://下载模板
							window.location.href = "template/学生模板.xlsx";
							break;
						case 'allot'://批量分配
						//判断是否勾选了
						var checkStatus = table.checkStatus('proTable');
						var ids = [];
						var names = [];
						for(var i=0; i<checkStatus.data.length; i++){
							if(checkStatus.data[i].stuStatus != 1){
								layer.msg("你选中的学生存在已分配过咨询师，请重新勾选未分配过的！")
								return; 
							}
							ids.push(checkStatus.data[i].id)
							names.push(checkStatus.data[i].name)
						}
						if(ids.length == 0){
							layer.msg("请选择需要分配的学生");
							return;
						}
						
						//回显勾选的学生
						$("#checkedStudent").html("");
						$("#checkedStudent").html(names.join(','));
						$("#studentIds").val(ids);
							layer.open({
								type:1,
								title: '您正在批量给学生分配咨询师',
								content: $('#batchFenLayer'),
								area: ['80%','80%']
							});
							break;
				    };
				  });
				  
				  /* // 表格数据里的事件监听（点击操作列里的按钮，比如查看详情等进来这里）
				  				table.on('tool(filterTable)', function(obj) {
				  					var data = obj.data; //	获取当前行的数据
				  					var event = obj.event; // 	获取lay-event的值(根据这个值来判断是什么按钮)
				  					if (event == 'send') { 
				  						$("#senderId").val(globalData.userId);
				  						$("#senderName").val(globalData.loginName);
				  						$("#id").val(data.id);
				  						
				  						$("#sendForm")[0].reset();
				  						layer.open({
				  							type: 1,
				  							title: '您正在查看编号为【' + data.id + '】信息',
				  							content: $("#sendDIV"),
				  							area: ['80%', '80%']
				  						});
				  
				  					} else if (event == 'edit') { // 编辑操作
				  
				  						// 清空form里的数据
				  						$("#editForm")[0].reset();
				  						//数据回显
				  						form.val("editForm", data);
				  						//打开弹层
				  						layer.open({
				  							type: 1,
				  							title: '您正在编辑编号为【' + data.id + '】信息',
				  							content: $("#editDIV"),
				  							area: ['80%', '80%']
				  						});
				  
				  					} else if (event == 'del') { //	删除操作
				  						if (confirm("确定删除吗？")) {
				  							//	使用ajax发送请求给后台（调用servlet）
				  							$.ajax({
				  								type: 'post', //请求方式
				  								url: globalData.server + 'stu/deleteStuById', //请求路径	 			
				  								data: {
				  									"id": data.id
				  								}, //请求参数：“id”是参数名称，参数值从当前行的数据里获取	
				  								headers: {
				  									token: globalData.token
				  								},
				  								dataType: 'json', //返回格式	
				  								success: function(res) { //提交成功	
				  									layer.alert(res.msg);
				  									table.reload('proTable', {
				  										page: {
				  											curr: 1
				  										}
				  									})
				  								},
				  								error: function() { //提交失败
				  									alert("系统异常！！")
				  								}
				  							});
				  						}
				  					}
				  
				  				}); */

				//导入excel
				var uploadInst = upload.render({
					elem: '#importExcel', //绑定元素
					url: globalData.server+'students/importExcel?netpusherId='+globalData.userId, //上传接口
					headers:{token:globalData.token},
					accept:'file',
					done: function(res){
						//上传完毕回调
						if(res.code==0){
							layer.msg(res.msg,{icon:1,time:2000},function(){
								//刷新当前页面
								window.location.reload();
							});
						}else{
							layer.msg(res.msg,{icon:2,time:2000});
						}
					},
					error: function(){
						layer.msg("导入失败",{icon:2,time:2000});
					}
				});
			  	//数据表格里的事件监听
				table.on('tool(filterTable)',function(obj){
					var data = obj.data;//获取当前行的数据
					
					switch(obj.event){
						case 'editRole': //穿梭框组件
							//获取穿梭框左边数据
							$.ajax({
								type: 'post',				
								url: globalData.server + "roles/GetRolesAll",	
								data: {
									"token": globalData.token
								}, 
								dataType: 'json', 			
								success: function(res) {
									//res就是接口返回的所有角色数据，直接返回List
									var zuo = res;
									
									//获取穿梭框右边数据
									var you =  new Array();
									$.ajax({
										type: 'post',				
										url: globalData.server + "roles/getRolesByUid",	
										data: {
											"uid": data.id,
											"token": globalData.token
										}, 
										dataType: 'json', 			
										success: function(res) {
											//res是接口返回的当前用户的所有角色，直接返回List
											for(var i = 0; i < res.length; i++) {
												you.push(res[i].roleId);
											}
											
											
											//渲染穿梭框
											transfer.render({
												elem: '#demoTransfer',
												title: ['系统所有角色', '当前用户的角色'],
												data: zuo,
												value: you,
												parseData: function(udata) {
																return {
																	"value": udata.id, //数据值
																	"title": udata.name //数据标题
																}
															},
												onchange: function(obj, index) {
													if(index == "0") {
															//新增用户角色
															for (var i = 0; i < obj.length; i++) {
																$.ajax({
																	type: "post",
																	url: "" + globalData.server + "user/AddUserToRole",
																	data: {
																		"userId": data.id,
																		"roleId": obj[i].value,
																		"token": globalData.token
																	},
																	dataType: 'json',
																	success: function(res) { //提交成功
																		if(res){
																			layer.msg("设置角色成功！",{icon:1})
																		}
																	},
																	error: function() { //提交失败
																		alert("系统异常！！")
																	}
																});
															}
											
													} else {
														//删除用户角色
														for(var i = 0; i < obj.length; i++) {
															$.ajax({
																type: "post",
																url: "" + globalData.server + "user/RemoveUserFromRole",
																data: {
																	"userId": data.id,
																	"roleId": obj[i].value,
																	"token": globalData.token
																},
																dataType: 'json',
																success: function(res) { //提交成功
																	if(res){
																		layer.msg("移除角色成功！",{icon:1})
																	}
																},
																error: function() { //提交失败
																	alert("系统异常！！")
																}
															});
														}
											
													}
												}
											});
										},
										error: function() {
											alert("获取失败！！！")
										}
									});
								},
								error: function() {
									alert("获取失败！！！")
								}
							});
							
							//打开穿梭框弹层
							layer.open({
								type: 1,
								title: '您正在设置用户[' + data.loginName + ']的角色',
								content: $("#transferLayer"),
								area: ['500px', '400px'],
								fixed: false, //不固定
								maxmin: true,
								offset: '10px'
							});
							
							break;
				      case 'edit':		//修改操作
				    	  
				    		//数据的回显
							form.val("editForm", data);
							//打开弹层
							layer.open({
								type:1, 
								title: '您正在修改编号【'+ data.id + '】的信息',
								content: $('#editLayer'),
								area: ['800px','600px']
							});
				    	  
				      break;
				      case 'detail':		//查看操作
				    		//数据的回显
							form.val("detailForm", data);
							//打开弹层
							layer.open({
								type:1, 
								title: '您正在查看编号【'+ data.id + '】的信息',
								content: $('#detailLayer'),
								area: ['800px','600px']
							});
			      	  break;
				      case 'del':		//删除操作
				    		if(confirm("确定删除吗？")){
				    			$.ajax({
									type: 'delete', 					//提交方式get或post
									url: globalData.server+'students/'+data.id,	 					//提交路径
									// data: {"id":data.id}, 			//参数
									headers:{token:globalData.token},
									dataType: 'json', 				//返回的数据类型
									success: function(res) { 		//提交成功
										layer.alert(res.msg);		//提示信息
										table.reload('proTable'); 	// 修改后要刷新表格
									},
									error: function() { //提交失败
										alert("系统异常！！")
									}
								}); 
				    		}
				      
				      
				      
			      	  break;
					  case 'send': //发消息
							  $("#senderId").val(globalData.userId);
							  $("#senderName").val(globalData.loginName);
							  $("#id").val(data.id);
							  
							  $("#sendForm")[0].reset();
							  layer.open({
								type: 1,
								title: '您正在查看编号为【' + data.id + '】信息',
								content: $("#sendDIV"),
								area: ['80%', '80%']
							  });
						break;
					
				      case 'editImg':		//图片管理操作
				    		//数据的回显
							form.val("imgForm", data);
							//打开弹层
							layer.open({
								type:1, 
								title: '您正在操作编号【'+ data.id + '】的图片信息',
								content: $('#imgUploadLayer'),
								area: ['700px','600px']
							});
				    	  
				      break;
					      case 'message':		//聊天
					  	//打开弹层
					  	if(data.stuStatus == 1) {
					  		layer.msg("该学生还未被分配无法聊天");
					  		return;
					  	}
					  	form.val("messageForm", data);
					  	$("#userId").val(data.netpusherId);
					  	$("#toUserId").val(data.askerId);
					  	$("#createUser").val(data.createUser);
					  	$("#ziXunName").val(data.ziXunName);
					  	layer.open({
					  		type:1,
					  		title: '您正在和【'+ data.ziXunName + '】聊天',
					  		content: $('#messageLayer'),
							closeBtn :0,
					  		area: ['90%','90%']
					  		,cancel: function(){
					  			//右上角关闭回调
					  			return false ;//开启该代码可禁止点击该按钮关闭
					  		} 
					  	});
					  
					  	break;
					  case 'editTree':		//树形组件操作
					  
							cur_roleId = data.id; //给全局变量的当前角色ID赋值
							//获取数据
							$.ajax({
								type: 'post', 					
								url: 'getMenu', 						
								data: {roleId:data.id},
								dataType: 'json', 					
								success: function(res) { 		
									tree.render({
										elem: '#demoTree',
										data: res,
										id: 'roleTreeId',
										showCheckbox: true
									})
								},
								error: function() { //提交失败
									alert("系统异常！！")
								}
							}); 
			    		
							//打开弹层
							layer.open({
								type:1, 
								title: '您正在操作编号【'+ data.id + '】的图片信息',
								content: $('#treeLayer'),
								area: ['700px','600px']
							});
							
				    	  
				      break;
			    	};
				})
				
				//给角色设置权限，提交操作
				$("#submitTree").click(function() {
					var nodes = tree.getChecked('roleTreeId');
					treeSelectedArr = []; //清空已选中的权限数组
					for(var i = 0; i < nodes.length; i++) {
						getChildenId(nodes[i]); //调用递归的方法来获取所有选中节点的Id
					}
					//调用远程接口保存设置
					$.ajax({
						type: 'post', 					
						url: 'savePermission', 						
						data: {roleId:cur_roleId,selectedModule:treeSelectedArr.join(",")},
						dataType: 'json', 					
						success: function(res) { 		//提交成功
							if(res) {
								layer.msg('保存权限成功！', {
									icon: 1,
									time: 1000
								}, function() {
									layer.closeAll(); //关闭修改弹出层
								});
							} else {
								layer.msg('保存权限失败！', {
									icon: 2,
									time: 1000
								})
							}
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					}); 
					
				});
				
				
				
				//修改弹层的提交按钮
				form.on('submit(editSubmit)', function(data) {
					$.ajax({
						type: 'post', 					//提交方式get或post
						url: '', 						//提交路径
						data: $("#editForm").serialize(), 	//参数
						dataType: 'json', 					//返回的数据类型
						success: function(res) { 		//提交成功
							layer.closeAll();			//关闭弹层
							layer.alert(res.msg);		//提示信息
							table.reload('proTable'); 	//刷新表格
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					}); 
					return false;
				});
			  	
				//新增弹层的提交按钮
				form.on('submit(addSubmit)', function(data) {
					$.ajax({
						type: 'post', 					//提交方式get或post
						url: globalData.server+'students/insertStudents',	 					//提交路径
						data: $("#addForm").serialize(),
						headers:{token:globalData.token},
						dataType: 'json', 				//返回的数据类型
						success: function(res) { 		//提交成功
							layer.closeAll();			//关闭弹层
							layer.alert(res.msg);		//提示信息
							table.reload('proTable'); 	// 修改后要刷新表格
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					});

					return false;
				});
				
				//批量分配的提交按钮
				form.on('submit(batchFenSubmit)', function(data) {
					//获取选中的咨询师
					var askerId = $("#askerSelect").val();
					var askerName = $("#askerSelect option:selected").text();
					var studentIds=$("#studentIds").val();
					 if(askerId == ''){
						layer.msg("请选择咨询师"); 
					}else{ 
						$.ajax({
							type: 'post', 					//提交方式get或post
							url: globalData.server+'students/batchFenZXS',	 					//提交路径
							data: $("#batchFenForm").serialize()+"&askerName="+askerName,
							headers:{token:globalData.token},
							dataType: 'json', 				//返回的数据类型
							success: function(res) { 		//提交成功
								layer.closeAll();			//关闭弹层
								layer.alert(res.msg);		//提示信息
								table.reload('proTable'); 	// 修改后要刷新表格
							},
							error: function() { //提交失败
								alert("系统异常！！")
							}
						});
					}
					
				
					return false;
				});
				
				//监听发信息
					form.on('submit(sendSubmitBtn)', function(data) {
						$.ajax({
							type: 'post',
							url: globalData.server + 'students/sendmessage',
							headers: {
								token: globalData.token
							},
							data: $("#sendForm").serialize(),
							dataType: 'json',
							success: function(res) { //提交成功
								layer.alert(res.msg, {
									icon: 6
								}, function() {
									//关闭弹层
									layer.closeAll();
									//刷新表格
									table.reload('proTable', {
										page: {
											curr: 1
										}
									});
								});
							},
							error: function() { //提交失败
								alert("系统异常！！")
							}
						});
	
						return false;
					});
				
				
				
				//主图片上传
		        var uploadInst1 = upload.render({
		            elem: '#maintu'
		            ,url: 'uploadImg.do'
		            ,accept:'images'
		            ,size:50000
		            ,before: function(obj){
		            	//预读本地文件
		                obj.preview(function(index, file, result){
		                    $('#demo1').attr('src', result);
		                });
		            }
		            ,done: function(res){
		                //如果上传失败
		                if(res.code > 0){
		                    return layer.msg('上传失败');
		                }
		                
		                //上传成功
		                var demoText = $('#demoText1');
		                demoText.html('<span style="color: #4cae4c;">上传成功</span>');
		                //图片url填写
		                var fileupload = $("#mainImgUrl");
		                fileupload.attr("value",res.data);
		            }
		            ,error: function(){
		                //演示失败状态，并实现重传
		                var demoText = $('#demoText1');
		                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		                demoText.find('.demo-reload').on('click', function(){
		                    uploadInst1.upload();
		                });
		            }
		        });
		       //副图片上传
		        var uploadInst2 = upload.render({
		            elem: '#futu'
		            ,url: 'uploadImg.do'
		            ,accept:'images'
		            ,size:50000
		            ,before: function(obj){
		            	//预读本地文件
		                obj.preview(function(index, file, result){
		                    $('#demo2').attr('src', result);
		                });
		            }
		            ,done: function(res){
		                //如果上传失败
		                if(res.code > 0){
		                    return layer.msg('上传失败');
		                }
		                
		                //上传成功
		                var demoText = $('#demoText2');
		                demoText.html('<span style="color: #4cae4c;">上传成功</span>');
		                //图片url填写
		                var fileupload = $("#futuImgUrl");
		                fileupload.attr("value",res.data);
		            }
		            ,error: function(){
		                //演示失败状态，并实现重传
		                var demoText = $('#demoText2');
		                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		                demoText.find('.demo-reload').on('click', function(){
		                    uploadInst2.upload();
		                });
		            }
		        });
		       
		        //图片上传的提交按钮
				form.on('submit(imgSubmit)', function(data) {
					console.log($("#imgForm").serialize());
					$.ajax({
						type: 'post', 					//提交方式get或post
						url: '', 						//提交路径
						data: $("#imgForm").serialize(), 	//参数
						dataType: 'json', 					//返回的数据类型
						success: function(res) { 		//提交成功
							layer.closeAll();			//关闭弹层
							layer.alert(res.msg);		//提示信息
							table.reload('proTable'); 	//刷新表格
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					}); 
					return false;
				});

				form.verify({
					// 方式一
					// value：表单的值、item：表单的DOM对象
					// operationCount: function(value, item){
					//     if( /^[1-9]\d*$/) {
					//         return '必须为整数！！！'
					//     }
					// }
					// // 方式二
					// // 数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
					operationCount: [
						/^[+]{0,1}(\d+)$/,
						'必须为整数！！！'
					]
				});
			});
			
			
			//递归获取选中节点的Id
			function getChildenId(node) {
				if(node != null) {
					treeSelectedArr.push(node.id);
					for(var i = 0; node.children != null && i < node.children.length; i++) {
						getChildenId(node.children[i]);
					}
				}
			}
		</script>
		<script>
			var myDate = new Date;
			var year = myDate.getFullYear(); //获取当前年
			var mon = myDate.getMonth() + 1; //获取当前月
			var date = myDate.getDate(); //获取当前日
			var h = myDate.getHours();//获取当前小时数(0-23)
			var m = myDate.getMinutes();//获取当前分钟数(0-59)
			var s = myDate.getSeconds();//获取当前秒
			var now = year+"-"+mon+"-"+date+" "+h+":"+m+":"+s;
			var socket;
			function openSocket() {
				if (typeof (WebSocket) == "undefined") {
					console.log("您的浏览器不支持WebSocket");
				} else {
					console.log("您的浏览器支持WebSocket");
					//实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
					// var userId = document.getElementById('userId').value;
		
		            //var socketUrl = "ws://localhost:8080/webSocket/" + globalData.userId+"/"+globalData.loginName;
					var socketUrl = "ws://47.112.114:8080/webSocket/" + globalData.userId+"/"+globalData.loginName;
					console.log(socketUrl);
					if (socket != null) {
						socket.close();
						socket = null;
					}
					socket = new WebSocket(socketUrl);
					//打开事件
					socket.onopen = function () {
						console.log("websocket已打开");
						//socket.send("这是来自客户端的消息" + location.href + new Date());
					};
					//获得消息事件
					socket.onmessage = function (msg) {
						var serverMsg = "收到服务端信息：" + msg.data;
						console.log(serverMsg);
						//发现消息进入    开始处理前端触发逻辑
						//把我收到的消息放入聊天室
						$("#liaotianshi").append("<div style='text-align:left'>"+now+"<br>"+msg.data+"</div>")
					};
					//关闭事件
					socket.onclose = function () {
						console.log("websocket已关闭");
					};
					//发生了错误事件
					socket.onerror = function () {
						console.log("websocket发生了错误");
					}
				}
			}
		
			//7. 主动发消息
			function sendMessage() {
				if (typeof (WebSocket) == "undefined") {
					console.log("您的浏览器不支持WebSocket");
				} else {
					// console.log("您的浏览器支持WebSocket");
					var toUserId = document.getElementById('toUserId').value;
					var contentText = document.getElementById('contentText').value;
					var msg = '{"toUserId":"' + toUserId + '","contentText":"' + contentText + '"}';
					console.log(msg);
					socket.send(msg);
					//把我发的消息放入聊天室
					$("#liaotianshi").append("<div style='text-align:right'>"+now+"<br>"+contentText+"</div>")
					$("#contentText").val("");
				}
			}
			function closeSocket() {
				socket.close();
				//关闭弹层
				layer.closeAll();			//关闭弹层
			}
		</script>
	</body>
</html>
